<script setup>
import { ref, watch } from 'vue'
import { getLevelByChannelCode, getWechatPay } from '@/api/vip'
import { useUserStore } from '@/store';
import Toast from '@vant/weapp/dist/toast/toast';

const props = defineProps({
  isPayPopupShow: Boolean,
  payInfo: Object
})
const emit = defineEmits(['update:isPayPopupShow'])

const userStore = useUserStore()
const time = ref(15 * 60 * 1000)
const checked = ref(true)
const isIconShow = ref(false)
const channelCode = ref('')

const payInfo = ref({})

watch(() => props.payInfo, (val) => {
  payInfo.value = val
}, { deep: true })
const countDown = ref(null)

watch(() => props.isPayPopupShow, (val) => {
  if (val) {
    countDown.value.reset()
    time.value = 15 * 60 * 1000
    isIconShow.value = false
    channelCode.value = ''
    payInfo.value = props.payInfo
  }
}, { deep: true })

const onClose = () => {
  emit('update:isPayPopupShow', false)
}

const exchangeCodeFn = async () => {
  if (!channelCode.value) return Toast.fail('兑换码不能为空')
  const res = await getLevelByChannelCode(channelCode.value)
  payInfo.value = res.data
  Toast.success('使用成功')
}


const payFn = async () => {
  const { price, levelName, id } = payInfo.value
  let userBuyInfo = {
    amount: price,
    productName: levelName,
    id,
    type: 1,
    channelCode: channelCode.value,
  }
  const { data } = await getWechatPay(userBuyInfo)
  let orderSn = data.outTradeNo;
  let req = {
    timeStamp: '',
    nonceStr: '',
    package: data.packageVal, // 'prepay_id=' + outTradeNo,
    signType: 'MD5',
    paySign: '',
    success() {
      userStore.getUserInfo()
      uni.navigateTo({
        url: '/user-center/payResult/index?orderSn=' + orderSn + '&status=1'
      })
      userStore.getUserInfo()
    }
  }
  req = Object.assign(req, data);
  wx.requestPayment(req)

}
</script>

<template>
  <van-popup :show="isPayPopupShow" round @close="onClose" position="bottom" custom-style="height: 50%">
    <div class="box">
      <p class="payTitle">订单支付</p>
      <p class="time">
        <span>支付剩余时间</span>
        <van-count-down ref="countDown" class="countDown" v-model:time="time" />
      </p>
      <p class="price">
        <span>￥</span>
        <span>{{ payInfo?.price }}</span>
      </p>
      <p class="orgPrice">￥{{ payInfo?.orgPrice }}</p>

      <van-cell title="微信支付">
        <template #icon>
          <img class="imgIcon" src="@/assets/imgs/wxicon.png" alt="" />
        </template>
        <template #right-icon>
          <van-checkbox v-model:value="checked" checked-color="#83CD88"></van-checkbox>
        </template>
      </van-cell>
      <van-cell @click="isIconShow = !isIconShow">
        <template #title>
          <div class="cellTitle">优惠兑换码</div>
        </template>
        <template #right-icon>
          <i v-if="!isIconShow" class="iconfont ai-icon-shangsanjiao"></i>
          <i v-else class="iconfont ai-icon-xiantiaoshangsanjiao"></i>
        </template>
      </van-cell>
      <div class="ExchangeBox" v-if="isIconShow">
        <input v-model="channelCode" class="inputSty" type="text" placeholder="请输入优惠兑换码">
        <button @click="exchangeCodeFn">兑换</button>
      </div>
      <button class="btnButton" @click="payFn">立即支付</button>
    </div>
  </van-popup>
</template>

<style lang="less" scoped>
  .box {
    padding: 30rpx;

    .payTitle {
      text-align: center;
      font-size: 34rpx;
      font-weight: bold;
      color: #292650;
    }

    .time {
      margin: 36rpx 0 20rpx;
      font-size: 25rpx;
      color: #666666;
      display: flex;
      justify-content: center;
      align-items: center;

      label {
        margin-right: 10rpx;
      }
    }

    .price {
      color: #000000;
      text-align: center;

      label:last-child {
        font-size: 56rpx;
        font-weight: bold;
      }
    }

    .orgPrice {
      text-decoration-line: line-through;
      font-size: 25rpx;
      text-align: center;
      color: #666666;
      margin-top: 20rpx;
    }

    .imgIcon {
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      transform: translate(0, 5rpx);
      margin-right: 10rpx;
    }

    .cellTitle {
      margin-left: 50rpx;
    }

    .iconfont {
      font-size: 30rpx;
      transform: translate(-20rpx);
    }

    .ExchangeBox {
      position: relative;

      .inputSty {
        width: 610rpx;
        box-sizing: border-box;
        height: 78rpx;
        padding: 0 130rpx 0 0;
        font-size: 28rpx;
        margin-left: auto;
      }

      button {
        position: absolute;
        top: 5rpx;
        right: 30rpx;
        width: 120rpx;
        height: 70rpx;
        background: #83CD88;
        border-radius: 16rpx;
        font-size: 28rpx;
        color: #FFF;

        &::after {
          border: none;
        }
      }
    }

    .btnButton {
      width: 670rpx;
      height: 92rpx;
      background: #77B87C;
      border-radius: 46rpx;
      color: #FFF;
      position: absolute;
      bottom: 10%;

      &::after {
        border: none;
      }
    }
  }
</style>